/**
 * 组件名称：返回栏
 * 使用场景：Content区域，灰色主菜单之下的第一行
 * 功能介绍：点击按钮，跳转至指定返回页面；按钮右侧可渲染任何组件
 * 功能进度：100%
 * 待办事项：无
 */
"use client";

import React from "react";
import Link from "next/link";
import {Button, Flex, Text} from "@mantine/core";
import {IconArrowLeft} from "@tabler/icons-react";
import classes from "./IpdBackHeader.module.css";

export interface IpdBackHeaderProps {
  buttonName: string; // 按钮文字
  buttonVariant?: string; // 按钮样式
  buttonIcon?: React.FC<any>; // 按钮左侧图标，有默认值
  buttonHref: string; // 按钮路由跳转链接
  text?: string; // 右侧内容-文字
  children?: React.ReactNode; // 右侧内容-自定义组件
}

export const IpdBackHeader = ({
  buttonName,
  buttonVariant = "subtle", // 默认hover时才有背景色
  buttonIcon: Icon = IconArrowLeft, // 默认单箭头
  buttonHref,
  text,
  children,
}: IpdBackHeaderProps) => {
  return (
    <Flex
      h={40}
      gap="xs"
      justify="flex-start"
      align="center"
      className={classes.backHeader}
      style={{flexShrink: 0}}
    >
      <Button
        size="xs"
        component={Link}
        href={buttonHref}
        variant={buttonVariant}
        style={{flexShrink: 0}}
        leftSection={<Icon size={16} />}
      >
        {buttonName}
      </Button>
      {children}
      <Text
        size="sm"
        fw={500}
        style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}
      >
        {text}
      </Text>
    </Flex>
  );
};
